iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
4
Modern Web

Angular 全集中筆記系列 第 1

第 1 型 - 前言

  • 分享至 

  • xImage
  •  

面對愈來愈複雜難搞的使用者操作需求,使得前端開發維護的難度日益增加,而 Angular 框架在各開發階段提供了完整的開發模式,讓在應用程式的前端開發可以更容易的管控。

Angular

Angular

Angular 是 Google 的 Angular 團隊所發展出來的純前端框架,提供了路由 (Router) 導航的機制,來開發單一頁面應用程式 (Single-Page Application, SPA)。利用 HTML 來描述應用程式的頁面結構;CSS / SCSS / SASS / LESS 或 stylus 等樣式檔案,則用以描述應用程式頁面所呈現的樣式;而應用程式的邏輯以 TypeScript 為主要開發語言。

Angular 提供了元件 (Component)、指令 (Directive)、管道 (Pipe) 等不同的元件類別,並以模組 (Module) 為主要的開發模式,以更容易地開發高內聚、低耦合的前端程式。其次,常見的互動式表單需求,Angular 也提供了範本驅動表單 (Template-Driven Form) 與響應式表單 (Reactive-Driven Form) 兩種開發的方式,來擷取與驗證使用者輸入、建立與修改表單資料模型。再者,Angular 採用了依賴注賴 (Dependency Inject, DI) 的設計模式,以管控系統程式間的耦合度,讓程式的變更與抽換更加方便。最後,Google 也提供了 Angular CLI 來讓應用程式的開發、測試與 Code Style 等開發流程管理更加容易。

Angular 通常指的是 v2 以後的版本,而 Angular 1.x 一般會稱之為 AngularJs 以便區分。

除了用以開發網頁應用程式,可以搭配 Electron 來開發桌面應用程式 (Desktop Apps);或是結合 Ionic 來開發行動應用程式 (Mobile App)。Angular 團隊也開發了各種套件來支援各種不同的需求,例如,無障礙網頁 (Accessibility, a11y)、漸進式應用程式 (Progressive Web Apps, PWA),與由伺服器渲染 (Server-side render, SSR) 的應用程式,以支援搜尋引擎優化 (Search Engine Optimization, SEO)。

TypeScript

TypeScript

Typescript 是 Javasript 的超集合,由於 JavaScript 是弱型別的程式語言,增加了開發較複雜的應用系統的難度與維護性。TypeScript 則在 JavaScript 語言下加入型別特性,並支援類別 (Class)、介面 (Interface) 等物件導向的觀念;且可以將 TypeScript 編繹成不同版本的 ECMAScript,以在各種版本的瀏覽器中執行應用程式。

ECMAScript 是 JavaScript 的語言標準,每個瀏覽器所支援此標準的程度不同,可以透過瀏覽器支援網頁查詢使用的指令是否被支援。

本系列文章規劃

在這 30 天的文章,主要以 Angular 10 為主,並會依照開發、測試、編譯、發佈與開發流程等不同的階段,來了解 Angular 相關觀念與指令,並實作一待辦事項系統。


下一篇
第 2 型 - Angular CLI
系列文
Angular 全集中筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言